<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="6" style="padding-left: 70px;">
                <el-select v-model="value" placeholder="请选择" @change="changeDate">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <h5 style="text-align: center;">活跃度统计</h5>
            <div ref="chart" style="width:100%;height:400px">
            </div>
        </el-row>
    </div>
</template>

<script>
import dayjs from 'dayjs';

import {activeData} from '@/api/census/census'
export default {
    name:"active",
    data(){
        return{
            activeData:{
                xData:[],
                yData:[]
            },
            value:0,
            options:[
                {value:0,label:'本月数据'},
                {value:1,label:'15日数据'},
                {value:2,label:'本周数据'},
                {value:3,label:'上周数据'},
                {value:4,label:'上月数据'},
            ],
            times:[],
            weeks:['周末','周一', '周二', '周三', '周四', '周五', '周六'],
            chart: null,
        }
    }, 
    mounted(){
        this.changeDate(this.value);
        this.$nextTick(()=>{
            this.dataInit();
        })

        
    },
    beforeDestroy(){
        this.destoryData()
    },
    methods:{
        //发送请求请求数据
        async changeDate(val){
            this.getTimes(val);
            let res = await activeData(this.times);
            this.activeData = res.data;
            if(val === 2 || val === 3){
                this.activeData.xData = this.weeks;
            }
        },
        dataInit(){
            const option = {
            axisPointer:{
                show:true,
                type: 'none',
                label: {
                    show: true, // 是否显示文本标签。如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签，否则默认不显示
                    backgroundColor: '#999',
                }
            },
            xAxis: {
                type: 'category',
                name:'时间',
                data: this.activeData.xData,
                axisLabel:{
                    show:true,
                    interval:0,
                    rotate:30, 
                    textStyle:{
                        fontSize:"10"
                    }
                }
            },
            yAxis: {
                type: 'value',
                name:'活跃度'
            },
            series: [
                {
                data: this.activeData.yData,
                type: 'line',
                smooth: true
                },
            ]
            }
            this.chart = this.$echarts.init(this.$refs.chart);
            this.chart.setOption(option);
        },
        destoryData(){
            if(!this.chart){
            return
            }
            this.chart.dispose();
            this.chart = null;
        },
        getTimes(val){
            let time  =[];
            let now = dayjs().format('YYYY-MM-DD');
            let endTime;
            let startTime;
            switch(val){
                case 0:
                    startTime = dayjs().startOf('month').format('YYYY-MM-DD');
                    endTime = dayjs().endOf('month').format('YYYY-MM-DD');
                    time.push(startTime,endTime);
                break;
                case 1:
                    startTime = dayjs().subtract(14,'day').format("YYYY-MM-DD");
                    time.push(startTime,now);
                break;
                case 2:
                    startTime = dayjs().startOf('week').format('YYYY-MM-DD');
                    endTime = dayjs().endOf('week').format('YYYY-MM-DD');
                    time.push(startTime,endTime);
                break;
                case 3:
                    startTime = dayjs().subtract(1,'week').startOf('week').format('YYYY-MM-DD');                 
                    endTime = dayjs().subtract(1,'week').endOf('week').format('YYYY-MM-DD');
                    time.push(startTime,endTime);
                break;
                case 4:
                    startTime = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD');              
                    endTime = dayjs().subtract(1,'month').endOf('month').format('YYYY-MM-DD');
                    time.push(startTime,endTime);
                break;
            }
            this.times = time;
        },
    },
    watch:{
        activeData:{
            // immediate:true,
            deep:true,
            handler:function(val){
                //先销毁
                this.destoryData();
                //再创建
                this.dataInit();
            }
        }
    }
}
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>